<template>
  <div class="h-full flex flex-col">
    <!-- <Draggable>
      <div class="h-[100px] w-[160px]">AI生成内容</div>
    </Draggable> -->
    <div class="model-header">
      <div class="flex items-center">
        <div>
          <el-input
            v-model="queryData.name"
            style="width: 200px"
            placeholder="请输入数据集名称"
          />
        </div>
        <div class="ml-[15px]">
          <el-input
            v-model="queryData.type"
            style="width: 200px"
            placeholder="请输入数据集类型"
          />
        </div>
        <div class="ml-[15px]">
          <el-date-picker
            type="daterange"
            style="width: 280px"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </div>
        <div class="ml-[15px]">
          <el-button class="w-[80px]" color="#626aef" type="primary">
            查询
          </el-button>
        </div>
        <div class="ml-[15px]">
          <el-button class="w-[100px]" color="#626aef" type="primary">
            新建数据集
          </el-button>
        </div>
      </div>
    </div>
    <div class="sheet flex-1 overflow-auto mt-[10px]">
      <!-- <div>用户信息: {{ userInfos }}</div> -->
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{ 'font-weight': 'bold', color: '#333' }"
      >
        <el-table-column prop="name" label="数据集名称" width="150" />
        <el-table-column
          prop="count"
          label="数据总量"
          width="180"
          align="center"
        />
        <el-table-column prop="type" label="数据集类型" align="center" />
        <el-table-column prop="creator" label="创建人" align="center" />
        <el-table-column prop="ctime" label="创建时间" align="center" />
        <el-table-column label="操作" align="center" width="200">
          <template #default="scope">
            <el-button
              type="primary"
              @click="skipDataList(scope.row.name)"
              text
            >
              <SvgIcon
                class="mr-[4px]"
                name="dataSetName"
                size="18px"
                color="#409EFF"
              />
              <span>数据管理</span>
            </el-button>
            <el-button type="primary" text>
              <Delete class="w-[18px] h-[18px] mr-[4px] text-[#F56C6C]" />
              <div class="text-[#F56C6C]">删除</div>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="flex justify-center py-[15px] border-t">
      <el-pagination
        v-model:current-page="queryData.pageNum"
        v-model:page-size="queryData.pageSize"
        :page-sizes="[5, 10, 20, 50]"
        :total="tableData.length"
        layout="total, sizes, prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, defineAsyncComponent, reactive, onMounted } from 'vue';
  import { storeToRefs } from 'pinia';
  import { useUserInfo } from '@/store/user';
  import { useRouter } from 'vue-router';

  const SvgIcon = defineAsyncComponent(
    () => import('@/components/SvgIcon.vue'),
  );
  const Draggable = defineAsyncComponent(
    () => import('@/components/Draggable.vue'),
  );

  const router = useRouter();
  const userStores = useUserInfo();
  const { userInfos } = storeToRefs(userStores);

  const queryData = reactive({
    name: '', //数据集名称
    type: '', //数据集类型
    startTime: '', //开始时间
    endTime: '', //结束时间
    pageNum: 1, //页码
    pageSize: 10, //页数
  });

  const tableData = [
    {
      count: 2,
      creator: '金涛',
      ctime: '2025-03-12 08:47:54',
      id: 207,
      isDeleted: 0,
      llmId: 46,
      name: '测试001',
      type: '手动文本',
      userId: null,
      utime: null,
    },
  ];

  const handleSizeChange = (val: number) => {
    queryData.pageSize = val;
  };

  const handleCurrentChange = (val: number) => {
    queryData.pageNum = val;
  };

  const skipDataList = (name: string) => {
    router.push({
      path: '/model/manage/database/data-list',
      query: { ...router.currentRoute.value.query, dataSetName: name },
    });
  };

  onMounted(() => {
    console.log(1);
  });
</script>

<style scoped>
  .el-button {
    padding: 5px !important;
  }
</style>
